<template>
	<div style="background-color: #f4f4f4;">
		<el-dialog title="编辑用户基本信息" :visible.sync="dialogVisible" width="35%" :before-close="handleClose">


			<div class="course-cover-uploader">
				<div class="el-upload el-upload--text">
					<img :src="userPhoto" />
					<el-upload :show-file-list="false" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" action="http://101.43.71.61:8080/minio/upload"
					 :on-success="success" :headers="myHeader">
						<el-button type="primary" style="height: 2.6rem;text-align: center;margin-top: 1.875rem;background-color:  #03d3bd;border: none;">上传封面</el-button>
					</el-upload>
				</div>
			</div>
			<el-input v-model="userNetName" placeholder="用户网名" class="input"></el-input>
			<el-input v-model="userEmail" placeholder="用户邮箱" class="input"></el-input>
			<el-input v-model="vjudgeName" placeholder="vjudge账号名" class="input"></el-input>
			<el-input v-model="codeforcesName" placeholder="codeforces账号名" class="input"></el-input>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="changeInfo()" style="background-color:  #03d3bd;border: none;">确 定</el-button>
			</span>
		</el-dialog>
		<div class="main_header">
			<div class="profile-info-main">
				<div class="head-pic">
					<img :src="userPhoto" class="avatar-img" />
					<div class="change-photo"></div>
					<div class="el-dialog__wrapper" style="display: none;"></div>
					<div class="el-dialog select-avatar" style="margin-top: 15vh; width: 470px;"></div>
				</div>
				<div class="profile-info-cont">
					<section>
						<a class="profile-user-name level-color-7">{{Person.userNetName}}</a>
						<!-- <span></span> -->
					</section>
					<ul class="profile-cont clearfix">

						<li>{{Person.userName}}</li>
						<li>{{Person.userPhone}}</li>
						<li>{{Person.userEmail}}</li>
					</ul>
				</div>
			</div>
			<div class="profile-oprt-box">
				<el-button type="primary" icon="el-icon-edit" @click="Bind()" style="color: #03d3bd;border: solid #03d3bd 0.0625rem;background-color: white;">机构绑定</el-button>
				<el-button type="primary" icon="el-icon-edit" @click="dialogVisible=true;" style="color: #ffaa00;border: #ffaa00 solid 0.0625rem;background-color: white;">编辑信息</el-button>
			</div>

		</div>


		<div style="main_content">
			<div class="main_left">
				<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" active-text-color="#03d3bd">
					<!-- <el-submenu index="1">
						<template slot="title">
							<i class="el-icon-odometer"></i>
							<span>学习</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="1-1" @click="$router.push('/LearningRecord')">学习记录</el-menu-item>
						</el-menu-item-group>
						
					</el-submenu> -->
					<el-submenu index="2">
						<template slot="title">
							<i class="el-icon-chat-dot-round"></i>
							<span>消息</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="1-1" @click="$router.push('/Messagecenter')">消息</el-menu-item>
						</el-menu-item-group>

					</el-submenu>
					<el-submenu index="3">
						<template slot="title">
							<i class="el-icon-edit-outline"></i>
							<span>刷题</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="1-1" @click="$router.push('/WrongQuestionBook')">错题本</el-menu-item>
							<el-menu-item index="1-3" @click="$router.push('/Receivetopic')">收题本</el-menu-item>
							<el-menu-item index="1-2" @click="$router.push('/Messagecenter')">刷题记录</el-menu-item>
						</el-menu-item-group>

					</el-submenu>
					<el-submenu index="4">
						<template slot="title">
							<i class="el-icon-tickets"></i>
							<span>讨论贴</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="1-1" @click="$router.push('/Collectposts')">我的收藏</el-menu-item>
							<el-menu-item index="1-2" @click="$router.push('/MyPosts')">我的讨论贴</el-menu-item>
						</el-menu-item-group>

					</el-submenu>
					<el-submenu index="6">
						<template slot="title">
							<i class="el-icon-odometer"></i>
							<span>个人中心</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="6-1" @click="$router.push('/Person')">基本信息</el-menu-item>
						</el-menu-item-group>
						<el-menu-item-group>
							<el-menu-item index="6-2" @click="$router.push('/Bindingschool')">机构绑定</el-menu-item>
						</el-menu-item-group>

					</el-submenu>

				</el-menu>


			</div>
			<div class="mian_right">
				<router-view />
			</div>
		</div>
	</div>
</template>

<script>
	import {
		PersonManager
	} from "../../request/personCenter.js"
	export default {
		data() {
			return {
				Person: {},
				dialogVisible: false,
				input: '',
				userPhoto: "https://cdnoss.kaoshixing.com/ksx_prod/367700/file/sign/20211126/-1770398744.jpg",
				myHeader: {
					token: window.localStorage.getItem("token")
				},
				codeforcesName: '',
				userEmail: '',
				userNetName: '',
				userPhoto: 'https://images.nowcoder.com/head/986m.png?x-oss-process=image/resize,m_mfit,h_200,w_200',
				vjudgeName: ''
			}
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				this.dialogVisible = false
			},
			//获取用户信息
			getUserInfo() {
				PersonManager.getUserInfo().then(e => {
					console.log(e);
					this.Person = e.data.data;
					this.vjudgeName = this.Person.vjudgeName;
					this.userNetName = this.Person.userNetName;
					this.userPhoto = this.Person.userPhoto;
					this.codeforcesName = this.Person.codeforcesName;
					this.userEmail = this.Person.userEmail;
					this.userName = this.Person.userName
				})
			},
			changeInfo() {
				this.dialogVisible = false
				var parmas = {
					codeforcesName: this.codeforcesName,
					userEmail: this.userEmail,
					userNetName: this.userNetName,
					userPhoto: this.userPhoto,
					vjudgeName: this.vjudgeName
				}
				PersonManager.changeInfo(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					this.$message({
						message: e.data.data.message,
						type: 'success'
					});
				})


			},
			//图片上传成功
			success(response, file, fileList) {
				console.log(response);
				this.userPhoto = response.data.url;

			},
			Bind() {
				alert(12);
				this.$router.push('/Bindingschool');
			}

		},
		created() {
			this.getUserInfo();
		}
	}
</script>

<style scoped="scoped">
	.el-main {
		background-color: white;
		border: none;

	}

	.main_header {
		height: 6.25rem;
		/* margin-left: 0.625rem;
		margin-right: 0.625rem; */
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px #eeeeee solid;
		border-bottom: 1px #eeeeee solid;
	}

	.el-menu-vertical {
		border: 0;
		margin: 20px 0 20px 20px;
		height: -webkit-calc(100% - 40px);
		height: calc(100% - 40px);
	}

	.main_content {
		position: relative;

	}

	.el-menu {
		height: 100vh;
		background-color: white;
		border: none;
	}

	.main_left {
		position: absolute;
		/* margin-top: 0.625rem; */
		margin-left: 0.625rem;
		margin-right: 0.625rem;
		width: 15%;
		/* height: 18.75rem; */
		background-color: #f4f4f4;
	}

	.mian_right {
		left: 15%;
		width: 84%;
		margin-left: 0.625rem;
		margin-right: 0.625rem;
		/* height: 100vh; */
		position: absolute;
		background-color: #f0fafe;
	}

	.head-pic {
		height: 60px;
		overflow: initial;
		width: 60px;
	}

	.head-pic img {
		width: 100%;
	}

	.head-pic .avatar-img {
		border-radius: 50%;
	}

	.profile-info-main {
		display: flex;
		padding: 20px 10px 0 40px;
	}

	.change-photo {
		background: none;
		border-radius: 50%;
		bottom: 0;
		cursor: pointer;
		display: block;
		left: 0;
		opacity: .5;
		position: absolute;
		right: 0;
		top: 0;
	}

	.el-dialog__wrapper {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: auto;
		margin: 0;
	}

	.profile-user-name {
		max-width: 14em;
		display: inline-block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 14px;
		vertical-align: middle;
		line-height: 1;
	}

	.level-color-7 {
		color: #fc7123 !important;
	}

	.profile-cont {
		overflow: hidden;
		margin: 15px 0;
	}

	.clearfix {
		zoom: 1;
		display: block;
	}

	.profile-cont i {
		display: inline-block;
		width: 14px;
		height: 14px;
		vertical-align: -3px;
		margin-right: 2px;
	}

	.profile-info-cont {

		margin-left: 40px;
		padding-top: 5px;
	}

	ul {
		list-style: none;
	}

	.profile-cont li {
		float: left;
		margin-right: 10px;
		margin-bottom: 5px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 11em;
	}

	li {
		margin: 0;
		padding: 0;
		font-size: 0.875rem;
		font-weight: 400;
	}

	.profile-oprt-box {
		padding: 20px 40px 0 75px;
	}

	.profile-oprt-box>.el-button {
		background-color: #39d39c;
		border: none;
	}

	.el-upload {
		display: flex;
		justify-content: space-between;
		cursor: pointer;
	}

	.course-cover-uploader img,
	.course-add .el-form.exercise-form .course-cover-uploader img {
		width: 70%;
		height: 100px;

	}

	.input {
		margin-top: 1.25rem;
	}
</style>
